<template>
  <div class="login">
    <div class="loginBox">
      <p class="title">找回密码</p>
      <mu-container>
        <mu-form ref="form" :model="validateForm" class="mu-demo-form">
          <mu-form-item prop="phone" :rules="phoneRules">
            <mu-text-field v-model="validateForm.phone" prop="phone" placeholder="请输入手机号"></mu-text-field>
          </mu-form-item>
        </mu-form>
      </mu-container>

      <div class="sign">
        <div></div>

        <img v-if="this.validateForm.phone == ''" src="@as/img/xiayibu_moren@2x.png">

        <img
          v-if="this.validateForm.phone != ''"
          src="@as/img/xiayibu@2x.png"
          alt
          @click="submit()"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibility: false,
      phoneRules: [
        { validate: val => !!val, message: "必须填写手机号" },
        {
          validate: val => /^1[34578]\d{9}$/.test(val),
          message: "手机号格式不正确"
        }
      ],
      //   argeeRules: [{ validate: val => !!val, message: "必须同意用户协议" }],
      validateForm: {
        phone: ""
      }
    };
  },
  mounted() {
     this.$progress.done();
  },
  methods: {
    submit() {
      this.$refs.form.validate().then(vaild => {
        if (vaild) {
          this.$router.push({
            path: "/verify",
            query: { phone: this.validateForm.phone, forgetPassword: true }
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  display: flex;
  justify-content: center;
  // border:1px solid #000
}

.title {
  font-size: 36px;
  margin-top:50px;
  margin-bottom: 60px;
  font-weight: Medium;

}

.loginBox {
  width: 80%;
  //  border:1px solid #000
}
.mu-demo-form {
  width: 100%;
  max-width: 460px;
  //  border:1px solid #000
}

.solid {
  border-left: 1px solid #eee !important;
  height: 15px;
  width: 0px;
  margin: 10px;
}

.sign {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;

  div {
    width: 125px;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
  }
  p {
    font-size: 12.5px;
    color: #f47548;
  }

  img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }
}
</style>